import React, { useState, useRef } from "react";
import PropTypes from "prop-types"

import "./index.scss"

export default function Dialog(props) {

    const [size, setSize] = useState(true)
    /*const [visible, setVisible] = useState(true)*/
    const dialogRef = useRef()

    /*function move({ target, clientX , clientY }) {
        const dialogEl = dialogRef.current

        dialogEl.style.cursor = 'move'

        const distanceX = clientX - dialogEl.offsetLeft
        const distanceY = clientY - dialogEl.offsetTop



        target.onmousemove = (e) => {
            let rect = dialogEl.getBoundingClientRect()

            let dialogBottom = document.documentElement.clientHeight - rect.bottom - (e.clientY - distanceY - rect.top)
            let dialogRight = document.documentElement.clientWidth - rect.right - (e.clientX - distanceX - rect.left)

            dialogEl.style.bottom = dialogBottom + 'px'
            dialogEl.style.right = dialogRight + 'px'

        }

        target.onmouseup = () => {
            dialogEl.style.cursor = 'default'
            target.onmousemove = () => {}
            target.onmouseup = () => {}
        }
    }*/

    function resetSize() {
        const dialogEl = dialogRef.current
        dialogEl.addEventListener('transitionend', () => {
            dialogEl.style.transition = ''
        })
        if (size) {
            dialogEl.style.transition = 'height .3s, top .5s, left .5s'
            dialogEl.style.height = '44px'
            /*dialogEl.style.bottom = '20px'
            dialogEl.style.right = '20px'*/

            setSize(false)
        } else {
            dialogEl.style.transition = 'height .3s, top .6s, left .6s'
            dialogEl.style.height = '400px'
            /*dialogEl.style.bottom = '20px'
            dialogEl.style.right = '20px'*/
            setSize(true)
        }
    }



    return (
        <div style={ { display: props.visible ? 'block' : 'none', ...props.style } }
             className={ 'dialog-warp ' + props.className }
             ref={ dialogRef }
        >
            <div className={ 'dialog-header' } >
                <span className={ 'dialog-title' }>{ props.title }</span>
                <span className={ 'icon-line reset-size' } onClick={ resetSize } />
                <span className={ 'icon-cancel cancel' } onClick={ props.close } />
            </div>
            <div className={ 'dialog-main' } > { props.children } </div>
        </div>
    )
}

Dialog.propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    title: PropTypes.string,
    visible: PropTypes.bool,
    close: PropTypes.func
}

Dialog.defaultProps = {
    style: {},
    className: '',
    title: '标题',
    visible: false,
    close: () => {}
}